import React from "react";
import '@/assets/css/user.css'; // 引入样式
import TabBar from '@/components/TabBar';// 引入底部导航栏
import type business from "@/types/business"; // 引入类型声明文件

// 个人(我的)页面
const Index = () => {
  // 获取全局挂载的用户信息
  const [business] = useState<business>(React.business);
  // 退出登录
  const OnLogout = () => {
    React.UI.Dialog.confirm({
      title: '退出登录',
      content: '是否确认退出登录',
      onConfirm: () => {
        React.success('退出当前账号成功', () => {
          // 清除用户信息
          React.Cookies.remove('business', { path: '/' });
          React.business = {};
          // 跳转到登录页
          React.navigate('/business/login');
        })
      }
    })
  }

  return (
    <>
      <div className="top">
        <div>个人中心</div>
      </div>
      {/* <!-- 头部 --> */}
      <div className="header">
        <div className="userinfo">
          <div className="avatar">
            <img src={business?.avatar_cdn} alt="" />
          </div>
          <div className="nickname">{business?.nickname}</div>
        </div>
        <div className="corrugated">
          <div className="wave-top wave-item"></div>
          <div className="wave-middle wave-item"></div>
          <div className="wave-bottom wave-item"></div>
        </div>
      </div>
      <div className="menu-cell">

        <div className="item">
          <NavLink to="/business/profile" className="profile">
            <div className="title">个人资料</div>
            <div className="icon">
              <img src="/assets/images/right.png" alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <NavLink to="/business/email" className="email">
            <div className="title">邮箱认证</div>
            <div className="icon">
              <img src={'/assets/images/right.png'} alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <NavLink to="/guest" className="guest">
            <div className="title">住客信息</div>
            <div className="icon">
              <img src={'/assets/images/right.png'} alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <NavLink to="/order" className="order">
            <div className="title">我的订单</div>
            <div className="icon">
              <img src="/assets/images/right.png" alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <NavLink to="/business/coupon" className="coupon">
            <div className="title">我的优惠券</div>
            <div className="icon">
              <img src="/assets/images/right.png" alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <NavLink to="/business/about" className="about">
            <div className="title">关于我们</div>
            <div className="icon">
              <img src="/assets/images/right.png" alt="" />
            </div>
          </NavLink>
        </div>

        <div className="item">
          <a onClick={OnLogout} className="logout">
            <div className="title">退出登录</div>
            <div className="icon">
              <img src="/assets/images/right.png" alt="" />
            </div>
          </a>
        </div>

        {/* 占位符 */}
        <div style={{ height: "55px", backgroundColor: "#f4f6f8" }}></div>

      </div>
      <TabBar />
    </>
  )
}

export default Index;